<template>
    <section>
        <div class="wrapper">
            <h2>{{ title }}</h2>

            <van-field v-model="obj.userName" label="姓名" disabled input-align="right" is-link/>

            <van-field v-model="obj.userSex" label="性别" disabled input-align="right" is-link/>

            <van-field v-model="obj.userAge" label="年龄" disabled input-align="right" is-link/>

            <van-field v-model="obj.politicalStatus" label="政治面貌" disabled input-align="right" is-link/>

            <van-field v-model="obj.idcard" label="身份证号" disabled input-align="right" is-link/>

            <van-field v-model="obj.workStatus" label="职务职称" disabled input-align="right" is-link  @click="showWorkPicker = true"/>

            <van-field v-model="obj.unionName" label="所属工会" disabled input-align="right" is-link/>

            <van-field v-model="obj.salaryCard" label="工资卡号" type="number"  input-align="right" is-link/>

            <van-field required v-model="obj.userMobile" type="tel" label="联系电话" placeholder="请填写" input-align="right" is-link/>

            <van-field required v-model="obj.assistLevel" label="申请补助档次" placeholder="请如实填写" readonly input-align="right" is-link @click="leveel = 0,isSubsidyGrade = true" />

            <van-field required v-model="obj.reason" label="致困原因" placeholder="请选择" readonly input-align="right" is-link @click="showPicker = true"/>
            <van-field required v-model="obj.department" label="工作单位" placeholder="请选择"  input-align="right" is-link @click="showDepartmentPicker = true"/>
            <van-field required v-model="obj.averageIncome" label="家庭年人均收入(元)" type="number" placeholder="请如实填写" input-align="right" is-link />

            <van-field v-model="obj.prevYearLevel" label="上一年度补助档次" placeholder="请如实填写" readonly input-align="right" is-link @click="leveel = 1,isSubsidyGrade = true"/>

            <div class="AUploading">
              <span class="hint" v-if="needUpload">*</span>
              <span>附件</span>
              <van-uploader v-model="fileList" :max-size="1024 * 1024 * 10"  @oversize="oversize" @delete="ADDelete" :after-read="afterRead" accept=".doc,.docx,.pdf,.jpg,.png,.bmp,.xls,.xlsx" />
            </div>

            <span>
              <span class="hint">*</span>
              家庭主要困难情况
            </span>

            <van-field
                v-model="obj.situation"
                rows="5"
                autosize
                type="textarea"
                placeholder="请填写您的真实情况"
            />



            <p>
                <button @click="$router.go(-1);">上一步</button>

                <button @click="apply">确认申请</button>
            </p>
        </div>
        <!-- 职务职称 -->
        <van-popup v-model="showWorkPicker" round position="bottom">
            <van-picker
                    show-toolbar
                    :columns="workStatusList"
                    @cancel="showWorkPicker = false"
                    @confirm="selectWork"
            />
        </van-popup>
        <!-- 职务职称 end -->
        <!-- 工作单位 -->
        <van-popup v-model="showDepartmentPicker" round position="bottom">
            <van-picker
                show-toolbar
                :columns="orgInfoList"
                @cancel="showDepartmentPicker = false"
                @confirm="selectDepartment"
            />
        </van-popup>
        <!-- 工作单位 end -->
        <!-- 致困原因 -->
        <van-popup v-model="showPicker" round position="bottom">
            <van-picker
                show-toolbar
                :columns="reasons"
                @cancel="showPicker = false"
                @confirm="selectReason"
            />
        </van-popup>
        <!-- 致困原因 end -->

        <!-- 申请补助档次 -->
        <van-popup v-model="isSubsidyGrade" round position="bottom">
            <van-picker
                show-toolbar
                :columns="subsidyGrade"
                @cancel="isSubsidyGrade = false"
                @confirm="selectSG"
            />
        </van-popup>
        <!-- 申请补助档次 end -->
    </section>
</template>
<script>
import api from "@/data/api/index.js";
import check from "@/data/api/check.js";

import Vue from 'vue';
import { Field } from 'vant';
import { Cell } from 'vant';
import { RadioGroup, Radio } from 'vant';
import { Toast } from 'vant';
import { Popup, Picker} from 'vant';
import { Uploader } from 'vant';
import 'vant/lib/index.css';

Vue.use(Field);
Vue.use(Cell);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Toast);
Vue.use(Popup);
Vue.use(Picker);
Vue.use(Uploader);

export default {
    data(){
      return{
        obj:{
          applyType:'',
          userId:'',
          userName:'',
          userSex:'',
          userAge:'',
          salaryCard:'',
          idcard:'',
          workStatus:'',
          department:'',
          telephone:'',
          averageIncome:'',
          assistLevel:'',
          reason:'',
          situation:'',
          status:'0',
          unionId:'',
          unionName:'',
          prevYearLevel: '',
          attachmentStr:[],//附件
        },
        reasons:["家庭收入低","因病致困","意外致困","子女上学","其他"],
        // 帮扶档次
        subsidyGrade: [ "第一档", "第二档","第三档"],
        orgInfoList:[],
        workStatusList:[],
        showPicker:false,
        showWorkPicker:false,
        isSubsidyGrade: false,
        showDepartmentPicker:false,
        title: '',
        loading: false,
        fileList: [],
      }
    },
    mounted(){
      let _str=this.$route.query.tdata;
      let _obj=JSON.parse(_str)
      this.obj.applyType=_obj.no;
      this.title=_obj.title;
      this.getUserInfo();
        api.workState().then(res => {
            this.workStatusList = Object.keys(res).map((item)=>{
                return{
                    'text':res[item].value,
                    'id':res[item].id
                }
            });
        });
    },
    methods: {
      // 文件上传成功
      afterRead(file) {


        let form = new FormData()
        form.append('file',file.file)
          file.status = 'uploading';
          file.message = '上传中...';
        api.AUploading(form).then(res=>{
            if(res.code=='success'){
                let arr={
                    extName: res.data[0].extName,
                    originName: res.data[0].originName,
                    size: res.data[0].size,
                    url: res.data[0].url,
                }
                if(typeof this.obj.attachmentStr=='string'){
                    this.obj.attachmentStr= JSON.parse(this.obj.attachmentStr)
                }
                this.obj.attachmentStr=this.obj.attachmentStr.concat(arr)
                file.status = 'done';
                file.message = '';
            }else{
                file.status = 'failed';
                file.message = '上传失败';
            }

        })
      },
      // 文件超出大小
      oversize(){
        Toast('上传的附件大小不能超过10M！');
      },
      // 文件删除
      ADDelete(obj){
          this.obj.attachmentStr=this.obj.attachmentStr.filter(item => item.originName!==obj.file.name )
      },
      // 获取当前用户信息
      getUserInfo(){
          let user = JSON.parse(sessionStorage.getItem("user"));

          api.showUnionMember(user.userId).then(res => {
              if(res.userSex!='男' && res.userSex!='女'){
                  res.userSex=res.userSex == "01" ?"男" : "女"
              }
              this.obj = Object.assign(this.obj,res);
          });
          if(user.orgInfoList.length>0){
              this.obj.department=user.orgInfoList[0].name
              this.orgInfoList = Object.keys(user.orgInfoList).map((item)=>{
                  return{
                      'text':user.orgInfoList[item].name,
                      'id':user.orgInfoList[item].code
                  }
              });
          }

      },
      // 申请
      apply(){

          let tel=this.obj.userMobile;
          if(tel=="" || tel==null){
              Toast("请填写联系电话！");
              return;
          }
          let patt= /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
          if(!patt.test(tel)){
              Toast("电话号码格式错误！");
              return;
          }

          if(!this.obj.averageIncome){
              Toast('请如实填写家庭年人均收入(元)！');
              return;
          }
          if(!this.obj.assistLevel){
              Toast('请如实填写申请补助档次！');
              return;
          }
          if(!this.obj.reason){
              Toast('请选择致困原因！');
              return;
          }
          if(this.obj.attachmentStr.length<1&&this.needUpload){
              Toast('请上传附件');
              return;
          }
          if(!this.obj.situation){
              Toast('请如实填写家庭主要困难情况！');
              return;
          }
          if(this.loading){
            Toast('请勿重复点击提交');
            return;
          }
          this.loading = true
          delete this.obj.registerTime
          delete this.obj.auditTime
          delete this.obj.createTime
          this.obj.attachmentStr=JSON.stringify(this.obj.attachmentStr)
          api.assistSave(this.obj).then(res => {
              if(res.code=="success"){
                  Toast.success("申请成功");
                  setTimeout(() => {
                      this.$troute.query('DifficultAllowance');
                  }, 2000);
              }else{
                  Toast.fail(res.desc);
              }
              this.loading = false
          });
      },
      // 选择致困原因
      selectReason(value) {
          this.obj.reason = value;
          this.showPicker = false;
      },
        // 选择职务职称
        selectWork(value){
            this.obj.workStatus = value.text;
            this.showWorkPicker = false;
        },
        selectDepartment(value){
            this.obj.department = value.text;
            this.showDepartmentPicker = false;
        },
      // 选择档次
      selectSG(val){
        if(this.leveel === 0){
          this.obj.assistLevel = val
        } else if(this.leveel === 1){
          this.obj.prevYearLevel = val
        }
        this.isSubsidyGrade = false;
      }
    },
    computed: {
        needUpload(){
            return this.obj.assistLevel=='第一档'
        }
    }
}
</script>
<style lang="scss" scoped>
section{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
}
.wrapper{
    padding: 4px;
    font-size: 16px;
    box-sizing: border-box;
    h2{
        display: inline-flex;
        position: relative;
        font-size: 24px;
        margin: 21px 16px 25px;
        z-index: 1;
        &::after{
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            bottom: 1px;
            height: 5px;
            background-color: #C9151E;
            z-index: -1;
        }
    }
    >p{
        padding: 30px 20px;
        overflow: auto;
        button{
            float: left;
            width: 46%;
            height: 50px;
            color: #9E0F16;
            font-size: 20px;
            background-color: transparent;
            border: 1px solid #9E0F16;
            border-radius: 25px;
            &:last-child{
                float: right;
                color: #fff;
                background-color: #9E0F16;
            }
        }
    }
    >span{
        display: block;
        margin: 10px 16px;
        font-size: 14px;
    }
    textarea{
        padding: 5px 10px !important;
        border: 1px solid #D2D2D2 !important;
    }
}
.AUploading{
  font-size: 14px;
  display: flex;
  .van-uploader{
    margin-left: 10px;
  }
}
</style>
